<template>
  <div class="login_bg">
    <div class="login-form">
      <h3 class="inputmagin">泓宇管理系统</h3>
      <el-input
        placeholder="用户名"
        prefix-icon="el-icon-user"
        class="inputmagin"
        v-model="user"
      >
      </el-input>
      <el-input
        placeholder="密码"
        prefix-icon="el-icon-key"
        v-model="pwd"
        show-password
        class="inputmagin"
      ></el-input>
      <p>{{ data }}</p>
      <el-button type="success" class="inputmagin" @click="gohome"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import { userlogin } from "../apis/users";
export default {
  data() {
    return {
      user: "",
      pwd: "",
      data: "",
    };
  },
  methods: {
    gohome() {
      userlogin({ account: this.user, password: this.pwd }).then((res) => {
        if (res.data.code == 0) {
          window.localStorage.setItem("userid", res.data.id);
          this.$router.push("/home/");
          this.$message({
            message: "泓宇系统，登录成功",
            type: "success",
          });
        } else {
          this.$message.error("登录失败，请检查用户名密码是否正确");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_bg {
  height: 100%;
  background: url(../assets/imgs/login.gif) no-repeat center center;

  .login-form {
    text-align: center;
    position: absolute;
    right: 10%;
    top: 50%;
    width: 360px;
    transform: translateY(-50%);
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    h3 {
      color: #fff;
    }
    .inputmagin {
      margin: 10px 0;
    }
    p {
      line-height: 20px;
    }
  }
}
</style>